<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" href="img/fav-icon.png" type="image/x-icon" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>百草视科技-联系我们</title>

    <!-- Icon css link -->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Rev slider css -->
    <link href="vendors/revolution/css/settings.css" rel="stylesheet">
    <link href="vendors/revolution/css/layers.css" rel="stylesheet">
    <link href="vendors/revolution/css/navigation.css" rel="stylesheet">

    <!-- Extra plugin css -->
    <link href="vendors/owl-carousel/owl.carousel.min.css" rel="stylesheet">
    <link href="vendors/magnify-popup/magnific-popup.css" rel="stylesheet">


    <link href="css/style.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

    <!--================ 顶部导航栏 =================-->
    <header class="main_menu_area">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span></span>
                <span></span>
                <span></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="index.html">主页</a></li>
                    <li class="nav-item"><a class="nav-link" href="about-us.html">关于我们</a></li>
                    <li class="nav-item"><a class="nav-link" href="service.html">服务介绍</a></li>
                    <!-- <li class="nav-item dropdown submenu">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            百草新闻
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li class="nav-item"><a class="nav-link" href="blog.html">查看新闻</a></li>
                            <li class="nav-item"><a class="nav-link" href="elements.html">数据概览</a></li>
                        </ul>
                    </li> -->
                    <li class="nav-item active"><a class="nav-link" href="contact.html">意见反馈</a></li>
                </ul>
            </div>
        </nav>
    </header>
    <!--================ 顶部导航栏结束 =================-->

    <!--================Banner Area =================-->
    <section class="banner_area">
        <div class="container">
            <div class="banner_inner_text">
                <h2>联系我们</h2>
                <p>我们需要你们的意见建议，也希望可以获得好评</p>
            </div>
        </div>
    </section>
    <!--================End Banner Area =================-->

    <!--================ 联系我们开始  =================-->
    <section class="get_in_touch_area">
        <div class="container">
            <div class="row get_touch_inner">
                <div class="col-lg-6">
                    <form class="contact_us_form row" action="contact_process.php" method="post" id="contactForm"
                        novalidate="novalidate">
                        <div class="form-group col-lg-6">
                            <input type="text" class="form-control" id="name" name="name" placeholder="名字">
                        </div>
                        <div class="form-group col-lg-6">
                            <input type="email" class="form-control" id="email" name="email" placeholder="邮箱">
                        </div>
                        <div class="form-group col-lg-12">
                            <input type="text" class="form-control" id="subject" name="subject" placeholder="主题*">
                        </div>
                        <div class="form-group col-lg-12">
                            <textarea class="form-control" name="message" id="message" rows="1"
                                placeholder="消息"></textarea>
                        </div>
                        <div class="form-group col-lg-12">
                            <button type="submit" value="submit" class="btn submit_btn form-control">发送</button>
                        </div>
                    </form>
                </div>
                <div class="col-lg-6">
                    <div class="touch_details">
                        <div class="l_title">
                            <img src="img/icon/title-icon.png" alt="">
                            <h6>Say hello</h6>
                            <h2>通过电子邮件或电话与我们联系</h2>
                        </div>
                        <p>如果您对网站有什么建议，恳请您向我们提出</p>
                        <!-- 
                        <a href="#">
                            <h5>Call us now</h5>
                        </a>
                        <a href="#">
                            <h4>电话</h4>
                        </a>
                         -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--================End Get in Touch Area =================-->

    <!--================End We Are Company Area =================-->
    <section class="talk_area">
        <div class="container">
            <div class="talk_text">
                <h4>直接发送邮件</h4>
                <a href="mailto:2100502103@gdpu.edu.cn">2100502103@gdpu.edu.cn</a>
            </div>
        </div>
    </section>
    <!--================End We Are Company Area =================-->

    <!--================Map Area =================-->
    <section class="world_map_area p_100">
        <div class="container">
            <div class="world_map_inner">
                <img class="img-fluid" src="img/world-map.png" alt="">
                <div class="bd-callout">
                    <h3>广州百草视科技有限公司</h3>
                    <p>广东药科大学, 广州市番禺区 <br /> 中国</p>
                    <h4><a href="javascript:;">电话 +86 888 8888 8888</a>
                        <a href="mailto:2100502103@gdpu.edu.cn">邮箱 2100502103@gdpu.edu.cn</a>
                    </h4>
                </div>
            </div>
        </div>
    </section>
    <!--================End Map Area =================-->

    <!--================ 订阅开始 =================-->
    <footer class="footr_area">
        <div class="footer_widget_area">
            <div class="container">
                <div class="row footer_widget_inner">
                    <div class="col-lg-4 col-sm-6">
                        <aside class="f_widget f_about_widget">
                            <p>中药材无损高精准鉴别， 更好的中药材展示模式， 就在百草视！</p>
                        </aside>
                    </div>
                    <!-- <div class="col-lg-4 col-sm-6">
                        <aside class="f_widget f_insta_widget">
                            <div class="f_title">
                                <h3>Instagram</h3>
                            </div>
                            <ul>
                                <li><a href="#"><img src="img/instagram/ins-1.jpg" alt=""></a></li>
                                <li><a href="#"><img src="img/instagram/ins-2.jpg" alt=""></a></li>
                                <li><a href="#"><img src="img/instagram/ins-3.jpg" alt=""></a></li>
                                <li><a href="#"><img src="img/instagram/ins-4.jpg" alt=""></a></li>
                                <li><a href="#"><img src="img/instagram/ins-5.jpg" alt=""></a></li>
                                <li><a href="#"><img src="img/instagram/ins-6.jpg" alt=""></a></li>
                                <li><a href="#"><img src="img/instagram/ins-7.jpg" alt=""></a></li>
                                <li><a href="#"><img src="img/instagram/ins-8.jpg" alt=""></a></li>
                            </ul>
                        </aside>
                    </div> -->
                    <div class="col-lg-4 col-sm-6">
                        <aside class="f_widget f_subs_widget">
                            <div class="f_title">
                                <h3>订阅我们，接收百草视最新消息</h3>
                            </div>
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="你的邮箱地址"
                                    aria-label="Your e-mail address here">
                                <span class="input-group-btn">
                                    <button class="btn btn-secondary submit_btn" id="subscribe"
                                        type="button">订阅</button>
                                </span>
                            </div>
                        </aside>
                    </div>
                </div>
            </div>
        </div>
        <!-- 
        <div class="footer_copyright">
            <div class="container">
                <div class="float-sm-left">
                    <h5>
                        Copyright &copy;
                        <script>document.write(new Date().getFullYear());</script> All rights reserved | This template
                        is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com"
                            target="_blank">Colorlib</a>
                    </h5>
                </div>
                <div class="float-sm-right">
                    <ul>
                        <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                        <li><a href="#"><i class="fa fa-behance"></i></a></li>
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
 -->
    </footer>
    <!--================ 订阅结束 =================-->


    <!--================Contact Success and Error message Area =================-->
    <div id="success" class="modal modal-message fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="fa fa-close"></i>
                    </button>
                    <h2>感谢！</h2>
                    <p>发送成功</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Modals error -->

    <div id="error" class="modal modal-message fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="fa fa-close"></i>
                    </button>
                    <h2>抱歉！</h2>
                    <p>发送失败</p>
                </div>
            </div>
        </div>
    </div>
    <!--================End Contact Success and Error message Area =================-->



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- Rev slider js -->
    <script src="vendors/revolution/js/jquery.themepunch.tools.min.js"></script>
    <script src="vendors/revolution/js/jquery.themepunch.revolution.min.js"></script>
    <script src="vendors/revolution/js/extensions/revolution.extension.actions.min.js"></script>
    <script src="vendors/revolution/js/extensions/revolution.extension.video.min.js"></script>
    <script src="vendors/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
    <script src="vendors/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
    <script src="vendors/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
    <script src="vendors/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
    <!-- Extra plugin css -->
    <script src="vendors/counterup/jquery.waypoints.min.js"></script>
    <script src="vendors/counterup/jquery.counterup.min.js"></script>
    <script src="vendors/counterup/apear.js"></script>
    <script src="vendors/counterup/countto.js"></script>
    <script src="vendors/owl-carousel/owl.carousel.min.js"></script>
    <script src="vendors/magnify-popup/jquery.magnific-popup.min.js"></script>
    <script src="js/smoothscroll.js"></script>
    <script src="vendors/circle-bar/circle-progress.min.js"></script>
    <script src="vendors/circle-bar/plugins.js"></script>
    <script src="vendors/isotope/imagesloaded.pkgd.min.js"></script>
    <script src="vendors/isotope/isotope.pkgd.min.js"></script>

    <!--gmaps Js-->
    <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCjCGmQ0Uq4exrzdcL6rvxywDDOvfAu6eE"></script> -->
    <script src="js/gmaps.min.js"></script>

    <!-- contact js -->
    <script src="js/jquery.form.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/contact.js"></script>

    <script src="js/circle-active.js"></script>
    <script src="js/theme.js"></script>
    <script src="js/subscribe.js"></script>
    <script>
        let closeButton = document.querySelectorAll(".close");
        closeButton[0].onclick = function () {
            location.reload();
        }
        closeButton[1].onclick = function () {
            location.reload();
        }
    </script>
</body>

</html>